<template>
    <div id="LibraryDetail">
        <div class="create-content">
            <div class="info-title">
                <h3>基本信息</h3>
            </div>
            <div class="libray-form">
                <el-form :model="ruleForm"  ref="ruleForm" :label-position="'left'" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="名称" prop="name">
                        11111
                        <!-- <el-input class="w400" v-model="ruleForm.name" placeholder="请输入文档名称"></el-input> -->
                    </el-form-item>
                    <el-form-item label="专业" prop="region">
                        我是专业
                    </el-form-item>
                    <el-form-item label="类型" prop="region">
                        我是类型
                    </el-form-item>
                    <el-form-item label="标签" prop="region">
                        <el-tag :key="tag" v-for="tag in dynamicTags" :disable-transitions="false">
                            {{  tag  }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="简介" prop="desc">
                        <div class="introduction">他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的愚；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！我说道，“爸爸，你走吧。”他往车外看了看说，“我买几个橘子去。你就在此地，不要走动。”</div>
                    </el-form-item>
                    <div class="info-title" style="margin-bottom: 15px;">
                        <h3>文档</h3>
                    </div>
                    <el-form-item label="特殊资源" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="免费"></el-radio>
                            <el-radio label="VIP"></el-radio>
                            <el-radio label="收费"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文档价格" prop="desc">
                        <!-- <el-input class="w400" v-model="ruleForm.desc"></el-input> -->
                        <el-input class="w400" placeholder="请输入文档价格" clearable>
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="上传" prop="desc">
                        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="text-align: center;">
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LibraryDetail',

    data() {
        return {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
        };
    },

    mounted() {

    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    },
};
</script>

<style lang="scss" scoped>
#LibraryDetail {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 84px);
    padding: 20px;
    background: #f4f4f4;

    .create-content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background: #fff;
        padding: 20px;
        box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
        overflow-y: scroll;
    }

    .info-title {
        line-height: 50px;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 30px;

        h3 {
            padding: 0;
            margin: 0;
        }
    }

    .libray-form {
        // margin-top: 40px;
        // padding-left: 40px;
    }

    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .el-form-item {
        padding-left: 30px;
    }
}
</style>